<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      div{
        border: 1px solid #000;
      }

      #mainDiv{
        width: 1000px;
        height: 700px;
        margin: auto;
        display: flex;
        flex-direction:column;
        /*flex-wrap: wrap;*/
        /*
           子元素X轴方向对齐方式
           flex-start：居左对齐（默认）
           flex-end：居右对齐
           center：居中对齐
           space-between：两端对齐
        */
        justify-content: center;
        /*
          子元素Y轴方向对齐方式
          flex-start:居上对齐（默认）
          flex-end：居下对齐
          center：居中对齐
         */
        align-items: flex-end;
      }
      #mainDiv div{
        width: 150px;
        height: 100px;
      }
  </style>
</head>
<body>
    <div id="mainDiv">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>
</html>
